﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation -Class/Class.Extras</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Chain">Chain</a></h4>
      <div class="menu-item"><a href="#Chain:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Chain:chain">chain</a></div>
      <div class="menu-item"><a href="#Chain:callChain">callChain</a></div>
      <div class="menu-item"><a href="#Chain:clearChain">clearChain</a></div>
      <h4 class="menu-item"><a href="#Events">Events</a></h4>
      <div class="menu-item"><a href="#Events:addEvent">addEvent</a></div>
      <div class="menu-item"><a href="#Events:addEvents">addEvents</a></div>
      <div class="menu-item"><a href="#Events:fireEvent">fireEvent</a></div>
      <div class="menu-item"><a href="#Events:removeEvent">removeEvent</a></div>
      <div class="menu-item"><a href="#Events:removeEvents">removeEvents</a></div>
      <h4 class="menu-item"><a href="#Options">Options</a></h4>
      <div class="menu-item"><a href="#Options:setOptions">setOptions</a></div>
      <div class="menu-item"><a href="#"></a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Chain"><a href="#Chain">Class: Chain</a></h1>

<p class="description">A Utility Class which executes functions one after another, with each function firing after completion of the previous.
Its methods can be implemented with <a href="class.html#Class:implement">Class:implement</a> into any <a href="class.html">Class</a>, and it is currently implemented in <a href="../Fx/Fx.html">Fx</a> and <a href="../Request/Request.html">Request</a>.
In <a href="../Fx/Fx.html">Fx</a>, for example, it is used to create custom, complex animations.</p>

<h2 id="Chain:constructor"><a href="#Chain:constructor">Chain Method: constructor</a></h2>

<h3 class="description">Syntax:</h3>

<h4>For new classes:</h4>

<pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span> Implements: Chain <span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>For existing classes:</h4>

<pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Chain<span class="br0">)</span>;
</pre>

<h4>Stand alone</h4>

<pre class="javascript"><span class="kw2">var</span> myChain = <span class="kw2">new</span> Chain;
</pre>

<h3>Example:</h3>

<pre class="javascript">    <span class="kw2">var</span> Todo = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
        Implements: Chain,
        initialize: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw1">this</span>.<span class="me1">chain</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span>, arguments<span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span><span class="br0">)</span>;
&nbsp;
    <span class="kw2">var</span> myTodoList = <span class="kw2">new</span> Todo<span class="br0">(</span>
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'get groceries'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'go workout'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'code mootools documentation until eyes close involuntarily'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'sleep'</span><span class="br0">)</span>; <span class="br0">}</span>
    <span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="Class.html">Class</a></li>
</ul>
<h2 id="Chain:chain"><a href="#Chain:chain">Chain Method: chain</a></h2>

<p class="description">Adds functions to the end of the call stack of the Chain instance.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">chain</span><span class="br0">(</span>fn<span class="br0">[</span>, fn2<span class="br0">[</span>, fn3<span class="br0">[</span>, ...<span class="br0">]</span><span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>fn - (<em>function</em> or <em>array</em>) The function (or array of functions) to add to the chain call stack. Will accept and number of functions or arrays of functions.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) The current Class instance. Calls to chain can also be chained.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="co1">//Fx.Tween has already implemented the Chain class because of inheritance of the Fx class.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>property: <span class="st0">'opacity'</span><span class="br0">}</span><span class="br0">)</span>;
myFx.<span class="me1">start</span><span class="br0">(</span><span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span>
    <span class="co1">//Notice that "this" refers to the calling object (in this case, the myFx object).</span>
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">)</span>; <span class="br0">}</span>
<span class="br0">)</span>; <span class="co1">//Will fade the Element out and in twice.</span>
</pre>

<h3>See Also:</h3>

<ul>
<li>
<a href="../Fx/Fx.html">Fx</a>, <a href="../Fx/Fx.Tween.html">Fx.Tween</a>
</li>
</ul>
<h2 id="Chain:callChain"><a href="#Chain:callChain">Chain Method: callChain</a></h2>

<p class="description">Removes the first function of the Chain instance stack and executes it. The next function will then become first in the array.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">[</span>any arguments<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>Any arguments passed in will be passed to the "next" function.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>mixed</em>) The return value of the "next" function or false when the chain was empty.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myChain = <span class="kw2">new</span> Chain<span class="br0">(</span><span class="br0">)</span>;
myChain.<span class="me1">chain</span><span class="br0">(</span>
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'do dishes'</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'put away clean dishes'</span><span class="br0">)</span>; <span class="br0">}</span>
<span class="br0">)</span>;
myChain.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// alerts 'do dishes'.</span>
myChain.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// alerts 'put away clean dishes'.</span>
</pre>

<h2 id="Chain:clearChain"><a href="#Chain:clearChain">Chain Method: clearChain</a></h2>

<p class="description">Clears the stack of a Chain instance.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">clearChain</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) The current Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="st0">'color'</span><span class="br0">)</span>; <span class="co1">// Fx.Tween inherited Fx's implementation of Chain.</span>
myFx.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">while</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"D'oh!"</span><span class="br0">)</span>; <span class="br0">}</span><span class="br0">)</span>; <span class="co1">// chains an infinite loop of alerts.</span>
myFx.<span class="me1">clearChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// cancels the infinite loop of alerts before allowing it to begin.</span>
</pre>

<h3>See Also:</h3>

<ul>
<li>
<a href="../Fx/Fx.html">Fx</a>, <a href="../Fx/Fx.Tween.html">Fx.Tween</a>
</li>
</ul>
<h1 id="Events"><a href="#Events">Class: Events</a></h1>

<p class="description">A Utility Class. Its methods can be implemented with <a href="class.html#Class:implement">Class:implement</a> into any <a href="Class.html">Class</a>.
In <a href="../Fx/Fx.html">Fx</a>, for example, this Class is used to allow any number of functions to be added to the Fx events, like 'complete', 'start', and 'cancel'.
Events in a Class that implements <a href="#Events">Events</a> must be either added as an option or with addEvent, not directly through .options.onEventName.</p>

<h3>Syntax:</h3>

<h4>For new classes:</h4>

<pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span> Implements: Events <span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>For existing classes:</h4>

<pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Events<span class="br0">)</span>;
</pre>

<h3>Implementing:</h3>

<ul>
<li>This class can be implemented into other classes to add its functionality to them.</li>
<li>Events has been designed to work well with the <a href="#Options">Options</a> class. When the option property begins with 'on' and is followed by a capital letter it will be added as an event (e.g. 'onComplete' will add as 'complete' event).</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: Events,
    initialize: <span class="kw2">function</span><span class="br0">(</span>element<span class="br0">)</span><span class="br0">{</span>
        <span class="co1">// ...</span>
    <span class="br0">}</span>,
    complete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'complete'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">)</span>;
myWidget.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'complete'</span>, myFunction<span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>Events starting with 'on' are still supported in all methods and are converted to their representation without 'on' (e.g. 'onComplete' becomes 'complete').</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="Class.html">Class</a>, <a href="#Options">Options</a>
</li>
</ul>
<h2 id="Events:addEvent"><a href="#Events:addEvent">Events Method: addEvent</a></h2>

<p class="description">Adds an event to the Class instance's event stack.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">addEvent</span><span class="br0">(</span>type, fn<span class="br0">[</span>, internal<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>type     - (<em>string</em>) The type of event (e.g. 'complete').</li>
<li>fn       - (<em>function</em>) The function to execute.</li>
<li>internal - (<em>boolean</em>, optional) Sets the function property: internal to true. Internal property is used to prevent removal.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'element'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'start'</span>, myStartFunction<span class="br0">)</span>;
</pre>

<h2 id="Events:addEvents"><a href="#Events:addEvents">Events Method: addEvents</a></h2>

<p class="description">The same as <a href="#Events:addEvent">addEvent</a>, but accepts an object to add multiple events at once.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">addEvents</span><span class="br0">(</span>events<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>events - (<em>object</em>) An object with key/value representing: key the event name (e.g. 'start'), and value the function that is called when the Event occurs.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'element'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">addEvents</span><span class="br0">(</span><span class="br0">{</span>
    start: myStartFunction,
    complete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Done.'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Events:fireEvent"><a href="#Events:fireEvent">Events Method: fireEvent</a></h2>

<p class="description">Fires all events of the specified type in the Class instance.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">fireEvent</span><span class="br0">(</span>type<span class="br0">[</span>, args<span class="br0">[</span>, delay<span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>type  - (<em>string</em>) The type of event (e.g. 'complete').</li>
<li>args  - (<em>mixed</em>, optional) The argument(s) to pass to the function. To pass more than one argument, the arguments must be in an array.</li>
<li>delay - (<em>number</em>, optional) Delay in milliseconds to wait before executing the event (defaults to 0).</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: Events,
    initialize: <span class="kw2">function</span><span class="br0">(</span>arg1, arg2<span class="br0">)</span><span class="br0">{</span>
        <span class="co1">//...</span>
        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'initialize'</span>, <span class="br0">[</span>arg1, arg2<span class="br0">]</span>, <span class="nu0">50</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Events:removeEvent"><a href="#Events:removeEvent">Events Method: removeEvent</a></h2>

<p class="description">Removes an event from the stack of events of the Class instance.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">removeEvent</span><span class="br0">(</span>type, fn<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>type - (<em>string</em>) The type of event (e.g. 'complete').</li>
<li>fn   - (<em>function</em>) The function to remove.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Class instance.</li>
</ul>
<h3>Notes:</h3>

<ul>
<li>If the function has the property internal and is set to true, then the event will not be removed.</li>
</ul>
<h2 id="Events:removeEvents"><a href="#Events:removeEvents">Events Method: removeEvents</a></h2>

<p class="description">Removes all events of the given type from the stack of events of a Class instance. If no type is specified, removes all events of all types.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">removeEvents</span><span class="br0">(</span><span class="br0">[</span>events<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>events - (optional) If not passed removes all events of all types.

<ul>
<li>(<em>string</em>) The event name (e.g. 'success'). Removes all events of that type.</li>
<li>(<em>object</em>) An object of type function pairs. Like the one passed to <a href="#Events:addEvents">addEvents</a>.</li>
</ul>
</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) The current Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">removeEvents</span><span class="br0">(</span><span class="st0">'complete'</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>removeEvents will not remove internal events. See <a href="../Element/Element.Event.html#Element:removeEvent">Events:removeEvent</a>.</li>
</ul>
<h1 id="Options"><a href="#Options">Class: Options</a></h1>

<p class="description">A Utility Class. Its methods can be implemented with <a href="class.html#Class:implement">Class:implement</a> into any <a href="Class.html">Class</a>.
Used to automate the setting of a Class instance's options.
Will also add Class <a href="#Events">Events</a> when the option property begins with 'on' and is followed by a capital letter (e.g. 'onComplete' adds a 'complete' event). You will need to call this.setOptions() for this to have an effect, however.</p>

<h3>Syntax:</h3>

<h4>For new classes:</h4>

<pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>Implements: Options<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>For existing classes:</h4>

<pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Options<span class="br0">)</span>;
</pre>

<h2 id="Options:setOptions"><a href="#Options:setOptions">Options Method: setOptions</a></h2>

<p class="description">Merges the default options of the Class with the options passed in. Every value passed in to this method will be deep copied. Therefore other class instances or objects that are not intended for copying must be passed to a class in other ways.</p>

<h3>Syntax:</h3>

<pre class="javascript">myClass.<span class="me1">setOptions</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>options - (<em>object</em>, optional) The user defined options to merge with the defaults.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) The current Class instance.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: Options,
    options: <span class="br0">{</span>
        color: <span class="st0">'#fff'</span>,
        size: <span class="br0">{</span>
            width: <span class="nu0">100</span>,
            height: <span class="nu0">100</span>
        <span class="br0">}</span>
    <span class="br0">}</span>,
    initialize: <span class="kw2">function</span><span class="br0">(</span>options<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">setOptions</span><span class="br0">(</span>options<span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">{</span>
    color: <span class="st0">'#f00'</span>,
    size: <span class="br0">{</span>
        width: <span class="nu0">200</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//myWidget.options is now: {color: #f00, size: {width: 200, height: 100}}</span>
&nbsp;
<span class="co1">// Deep copy example</span>
<span class="kw2">var</span> mySize = <span class="br0">{</span>
    width: <span class="nu0">50</span>,
    height: <span class="nu0">50</span>
<span class="br0">}</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">{</span>
    size: mySize
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="br0">(</span>mySize == myWidget.<span class="me1">options</span>.<span class="me1">size</span><span class="br0">)</span> <span class="co1">// false! mySize was copied in the setOptions call.</span>
</pre>

<h3>Notes:</h3>

<ul>
<li>Relies on the default options of a Class defined in its options property.</li>
</ul>
<h2><a href="#">Options in combination with Events</a></h2>

<p class="description">If a Class has <a href="#Events">Events</a> as well as <a href="#Options">Options</a> implemented, every option beginning with 'on' and followed by a capital letter (e.g. 'onComplete') becomes a Class instance event, assuming the value of the option is a function.</p>

<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: <span class="br0">[</span>Options, Events<span class="br0">]</span>,
    options: <span class="br0">{</span>
        color: <span class="st0">'#fff'</span>,
        size: <span class="br0">{</span>
            width: <span class="nu0">100</span>,
            height: <span class="nu0">100</span>
        <span class="br0">}</span>
    <span class="br0">}</span>,
    initialize: <span class="kw2">function</span><span class="br0">(</span>options<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">setOptions</span><span class="br0">(</span>options<span class="br0">)</span>;
    <span class="br0">}</span>,
    show: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="co1">// Do some cool stuff</span>
&nbsp;
        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'show'</span><span class="br0">)</span>;
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">{</span>
    color: <span class="st0">'#f00'</span>,
    size: <span class="br0">{</span>
        width: <span class="nu0">200</span>
    <span class="br0">}</span>,
    onShow: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Lets show it!'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
myWidget.<span class="me1">show</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// fires the event and alerts 'Lets show it!'</span>
</pre>
    </div>
  </div>
 <script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
